<template>
  <view class="apply_easypay_qrcode_step3 need_scroll_top_view">
    <steps :active="3"></steps>
    <scroll-view class="scroll-wrap" :scroll-y="true" :style="{height: (safeHeight - safeWidth / 375 * (101 + 64)) + 'px'}">
      <view class="form-wrap">
        <form>
          <view class="desc-info">
            {{userType == 3 ? '企业的结算账户必须与营业执照同名' : '结算账户必须为申请人（身份证）名下的银行账户'}}
          </view>
          <view class="form-item self-border-bottom">
            <text class="form-item-label">账户名称</text>
            <input type="text" v-model="data.bankAccName" :disabled="isDisabled" class="form-item-input" placeholder="请填写您的银行账户名称 例“李某某”或“某某公司”" placeholder-class="input-placeholder" @blur="backFixationTop()"/>
            <view class="no-arrow"></view>
          </view>
          <view class="form-item self-border-bottom">
            <text class="form-item-label">银行账号</text>
            <input type="number" v-model="data.bankAcc" :disabled="isDisabled" class="form-item-input" placeholder="请填写您的银行账户" placeholder-class="input-placeholder" @blur="backFixationTop()"/>
            <view class="no-arrow"></view>
          </view>
          <view class="form-item self-border-bottom">
            <text class="form-item-label">开户银行</text>
            <picker :value="bankIndex" :range="bankArray" :disabled="isDisabled" @change="bindBankPickerChange" class="form-item-pick" range-key="name">
              <view :class="{'pick-value': !bankArray[bankIndex].id, 'pick-value-select': bankArray[bankIndex].id}" v-if="bankArray && bankArray.length > 0">{{bankArray[bankIndex].name}}</view>
            </picker> 
            <view class="arrow"></view>
          </view>
      
          <view class="form-item self-border-bottom">
            <text class="form-item-label">开户地区</text>
            <picker :value="multiDistrictIndex" :disabled="isDisabled" range-key="name" :range="multiDistrictArray" @cancel="bindDistrictPickerCancel" @change="bindDistrictPickerChange" @columnchange="bindDistrictColumnPickerChange" class="form-item-pick" mode="multiSelector">
              <view class="pick-value-select" v-if="multiDistrictArray && multiDistrictArray.length > 0 && selectDistrict">
                <text v-if="multiDistrictArray[0] && multiDistrictArray[0][multiDistrictIndex[0]]">{{multiDistrictArray[0][multiDistrictIndex[0]].name}}</text>
                <text v-if="multiDistrictArray[1] && multiDistrictArray[1][multiDistrictIndex[1]]">{{multiDistrictArray[1][multiDistrictIndex[1]].name}}</text>
                <text v-if="multiDistrictArray[2] && multiDistrictArray[2][multiDistrictIndex[2]]">{{multiDistrictArray[2][multiDistrictIndex[2]].name}}</text>
              </view>
              <view class="pick-value" v-else>请选择您的所在城市</view>
            </picker>
            <view class="arrow"></view>
          </view>
          <view class="form-item self-border-bottom">
            <text class="form-item-label">开户支行</text>
            <input type="text" v-model="data.bankName" :disabled="isDisabled" class="form-item-input" placeholder="请填写您的开户行" placeholder-class="input-placeholder" @blur="backFixationTop()"/>
            <view class="no-arrow"></view>
          </view>
          <view class="form-item">
            <text class="form-item-label">结算税率</text>
            <picker :value="feeIndex" :range="feeTypes" :disabled="isDisabled" @change="bindFeePickerChange" class="form-item-pick" range-key="label">
              <view :class="{'pick-value': !feeTypes[feeIndex].id, 'pick-value-select': feeTypes[feeIndex].id}" v-if="feeTypes && feeTypes.length > 0">{{feeTypes[feeIndex].label}}</view>
            </picker>
            <!-- <view class="rate-info">
              收款码收款流水扣除税率{{status == null || status == data.fee}}%
            </view> -->
            <view class="arrow"></view>
          </view>
          <view class="form-item">
            <text class="form-item-label">银行预留手机号</text>
            <input type="number" v-model="data.mobile" :disabled="isDisabled" class="form-item-input" placeholder="请填写您在银行开户预留的手机号码" placeholder-class="input-placeholder" @blur="backFixationTop()"/>
            <view class="no-arrow"></view>
          </view>
          <view class="form-item" style="padding-top: 0;line-height: 35rpx;">
            <view style="font-size: 22rpx;font-family:PingFang SC;font-weight:500;color:#FF7374;width: 100%;">此号码将用于易生电子签约（非常重要），请确保能正常接收验证码， 如有问题请联系开卡银行修改</view>
          </view>
          <view class="cut-line"></view>
          
          <view class="form-other-item">
            <view class="form-item-head">
              <view class="title">
                {{userType != 3 ? '结算账户照片' : '开户许可证照片'}}
              </view>
              <view class="sample">
                <text>示例</text>
              </view>
            </view>
            <view class="form-item-content" style="display: flex;">
              <view class="common-img-wrap" @click="uploadFile(1)" v-if="userType != 3">
                <view class="no-upload-img" v-if="!data.bankCardFileId || !data.bankCardFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传银行卡正面
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.bankCardFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
              <view class="common-img-wrap" @click="uploadFile(2)" v-else>
                <view class="no-upload-img" v-if="!data.licenseOpeningFileId || !data.licenseOpeningFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传开户许可证{{data.licenseOpeningFileUrl}}
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.licenseOpeningFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
            </view>
          </view>
        </form>
      </view>
    </scroll-view>
    
    <view class="qrcode_selected_platform-footer">
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="submitInfo" v-if="status == null || status == 1">提交信息</button>
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="nextStep" v-else>查看收款码</button>
    </view>
    
    <uni-popup class="join-pop" ref="explainPopup" type="center" :maskClick="false" :show="isFeePicker">
      <view class="pop-box-explain">
        <view class="nounTitleBox">
          <view class="nounTitle">税率提示</view>
        </view>
        <view class="nounContent">
          <!-- <view class="nounContent-tit"></view> -->
          <view class="nounContent-txt">
            <view>1.10%为平台的合作税率，选择此税率的商户，将享受发放红包及兑换券，福利券的福利</view>
            <view>2.0.38%为平台的基础税率，选择此税率的商户，将不会享受后续红包，兑换券，福利券的福利</view>
          </view>
        </view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn sub2" @click="closeisFeePicker">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import steps from '../common/steps.vue'
import formValid from '@/unit/graceChecker.js'
import { multiDistrict, uploadFile } from '@/unit/common.js'
import { getBankListSyncApi, submitEasyPayInfoApi, getEasyPayInfoApi, getFeeApi, getFeeApiSync } from '@/service/qrCode/qrCode.service.js'
import { scrollToTargetPosition, setSafeAreaSize } from '@/mixin/index.mixin.js'
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
export default {
  mixins: [scrollToTargetPosition, setSafeAreaSize],
  components: {
    steps,
    uniPopup
  },
  data () {
    return {
      id: null,
      status: null,
      userType: null,
      bankArray: [], // 银行列表
      bankIndex: 0,
      selectBank: false,
      isFeePicker: false,
      selectDistrict: false,
      feeTypes: [],
      feeIndex: 0,
      multiDistrictIndex: [], // 省市区选择的index
      multiDistrictArray: [], // 省市区数据 Array[Object]
      multiDistrictIds: [], // 省市区ID
      originMultiDistrictIndex: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictArray: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictIds: [], // 原始数据 用于取消选择省市区，还原原始数据
      data: {
        feeTypeName: '', // 税率
        bankAccName: '', // 账户名称
        bankAcc: '', // 开户账号
        bank: null, // 开户银行
        province: null, // 省份
        city: null, // 城市
        mobile: '', // 手机号
        // 开户地区
        bankName: '', // 开户支行
        bankCardFileUrl: null,
        bankCardFileId: null, // 银行卡正面
        licenseOpeningFileUrl: null,
        licenseOpeningFileId: null ,// 开户许可证照片
        // 银行卡照片
      }
    }
  },
  computed: {
    isDisabled: function () {
      return this.status != null && this.status != 1;
    }
  },
  methods: {
    closeisFeePicker() {
      this.isFeePicker = false;
    },
    // getFee () {
    //   getFeeApi({}, res => {
    //     if (res.status == 0) {
    //       this.feeTypes = res.data;
    //       if (this.feeTypes.length > 0) {
    //         this.feeTypes.unshift({
    //           id: null,
    //           label: '请选择税率',
    //           name: ''
    //         })
    //       }
    //     }
    //   });
    // },
    uploadFile (type) {
      if (this.status != null && this.status != 1) {
        return false;
      }
      uploadFile({
        success: (res) => {
          switch (type) {
          case 1:
            this.data.bankCardFileId = res.data.id;
            this.data.bankCardFileUrl = res.data.url;
            break;
          case 2:
            this.data.licenseOpeningFileId = res.data.id;
            this.data.licenseOpeningFileUrl = res.data.url;
            break;
          default:
          }
        }
      });
    },
    async initDistrictData (district) { // 初始化省市区数据
      let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.initMultDistrictArray({
        district: district,
        type: 2,
        length: 2
      });
      this.multiDistrictArray = multiDistrictArray;
      this.multiDistrictIndex = multiDistrictIndex;
      this.multiDistrictIds = multiDistrictIds;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(multiDistrictIds));
      this.data.province = this.multiDistrictIds[0];
      this.data.city = this.multiDistrictIds[1];
    },
    bindDistrictPickerCancel (e) { // 取消省市区的选择
      this.multiDistrictArray = JSON.parse(JSON.stringify(this.originMultiDistrictArray));
      this.multiDistrictIndex = JSON.parse(JSON.stringify(this.originMultiDistrictIndex));
      this.multiDistrictIds = JSON.parse(JSON.stringify(this.originMultiDistrictIds));
    },
    bindDistrictPickerChange (e) { // 确认省市区的选择
      this.selectDistrict = true;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(this.multiDistrictArray));      
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(this.multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(this.multiDistrictIds));
      this.data.province = this.multiDistrictIds[0];
      this.data.city = this.multiDistrictIds[1];
    },
    async bindDistrictColumnPickerChange (e) { // 省市区的列发生变化
      if (e.detail.column < this.multiDistrictArray.length - 1) {
        let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.bindDistrictColumnPickerChange({
          column: e.detail.column,
          index: e.detail.value,
          multiDistrictIndex: JSON.parse(JSON.stringify(this.multiDistrictIndex)),
          multiDistrictArray: JSON.parse(JSON.stringify(this.multiDistrictArray)),
          type: 2,
          length: 2
        });
        this.multiDistrictArray = multiDistrictArray;
        this.multiDistrictIndex = multiDistrictIndex;
        this.multiDistrictIds = multiDistrictIds;
      } else {
        this.multiDistrictIndex.splice(e.detail.column, 1, e.detail.value);
        this.multiDistrictIds.splice(e.detail.column, 1, this.multiDistrictArray[e.detail.column][e.detail.value].id);
      }
    },
    bindBankPickerChange (e) {
      // this.selectBank = true;
      this.bankIndex = e.target.value;
      this.data.bank = this.bankArray[e.target.value].id;
      
    },
    bindFeePickerChange (e) {
      this.feeIndex = e.target.value;
      this.data.feeTypeName = this.feeTypes[e.target.value].name;
      if (this.feeIndex == 1) {
        this.isFeePicker = true;
      }
    },
    nextStep () {
      uni.redirectTo({
        url: '/pages/qrCode/index?qrcodeType=2'
      })
    },
    submitInfo () {
      let rule = [
        {name:'bankAccName', checkType : 'notnull', checkRule:'',  errorMsg:'请填写账户名称'},
        {name:'bankAcc', checkType : 'notnull', checkRule:'',  errorMsg:'请填写银行卡号'},
        {name:'bank', checkType : 'notnull', checkRule:'',  errorMsg:'请选择开户银行'},
        {name:'province', checkType : 'notnull', checkRule:'',  errorMsg:'请选择开户行所在省份'},
        {name:'city', checkType : 'notnull', checkRule:'',  errorMsg:'请选择开户行所在城市'},
        {name:'bankName', checkType : 'notnull', checkRule:'',  errorMsg:'请填写开户支行'},
        {name:'feeTypeName', checkType : 'notnull', checkRule:'',  errorMsg:'请选择税率'},
        {name:'mobile', checkType : 'notnull', checkRule:'',  errorMsg:'请填写银行预留手机号'},
        {name: this.userType != 3 ? 'bankCardFileUrl' : 'licenseOpeningFileId', checkType : 'notnull', checkRule:'',  errorMsg: this.userType != 3 ? '请上传银行卡正面照' : '请上传开户许可证照片'},
        // {name:'bankCardBackFileUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传银行卡背面照'}
      ];
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        let params = Object.assign({}, this.data);
        if (this.userType != 3) {
          delete params.licenseOpeningFileId
        } else {
          delete params.bankCardFileUrl
        }
        let step1Data = uni.getStorageSync('qrcode_step1_data');
        let step2Data = uni.getStorageSync('qrcode_step2_data');
        if (!step1Data) {
          uni.showToast({
            title: '提交信息失败，请重试！',
            icon: 'none'
          })
          uni.setStorage({
            key: 'qrcode_step3_data',
            data: Object.assign(this.data),
            success: () => {
              //
            },
            fail: () => {
              uni.showToast({
                title: '存储信息失败，请重试！',
                icon: 'none'
              })
            }
          });
        } else if (!step2Data) {
          uni.showToast({
            title: '提交信息失败，请重试！',
            icon: 'none'
          })
          uni.setStorage({
            key: 'qrcode_step3_data',
            data: Object.assign(this.data),
            success: () => {
              // 
            },
            fail: () => {
              uni.showToast({
                title: '存储信息失败，请重试！',
                icon: 'none'
              })
            }
          });
        } else {
          params = Object.assign(params, step1Data, step2Data, {id: this.id});
          delete params.bankCardFaceFileUrl;
          delete params.bankCardBackFileUrl;
          delete params.storePlateFileUrl;
          delete params.districtIds;
          submitEasyPayInfoApi(params, res => {
            if (res.status == 0) {
              uni.removeStorageSync('yseasypayKey');
              uni.removeStorageSync('firstTrialKey');
              uni.showToast({
                title: '提交成功！',
                success: () => {
                  try {
                    uni.removeStorageSync('qrcode_step1_data');
                    uni.removeStorageSync('qrcode_step2_data');
                    uni.removeStorageSync('qrcode_step3_data');
                    setTimeout(function () {
                      uni.redirectTo({
                        url: '/pages/qrCode/index?qrcodeType=2'
                      })
                    }, 1500)
                  } catch (e) {
                    // error
                  }
                }
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              uni.setStorage({
                key: 'qrcode_step3_data',
                data: Object.assign(this.data),
                success: () => {
                  // 
                },
                fail: () => {
                  uni.showToast({
                    title: '存储信息失败，请重试！',
                    icon: 'none'
                  })
                }
              }); 
            }
          });
        }
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    async init (option) {
      uni.getStorage({
        key: 'qrcode_step3_data',
        success: (res) => {
          if (this.feeTypes && this.feeTypes.length > 0) {
            this.feeTypes.forEach((item, index) => {
              if (res.data.feeTypeName == item.name) {
                this.feeIndex = index;
              }
            })
          }
          this.bankArray.forEach((item, index) => {
            if (item.id == res.data.bank) {
              this.bankIndex = index;
            }
          });
          this.data = res.data;
          this.selectDistrict = true;
          this.initDistrictData([this.data.province, this.data.city]);
        },
        fail: () => {
          this.initDistrictData();
          // this.data.bank = this.bankArray[this.bankIndex].id;
        }
      });
      
      // uni.getStorage({
      //   key: 'qrcode_step3_data',
      //   success: (res) => {
      //     this.data = res.data;
      //     this.storeNatureList.forEach((item, index) => {
      //       if (this.data.userType === item.id) {
      //         this.natureIndex = index;
      //       }
      //     });
      //     this.tradeList.forEach((item, index) => {
      //       if (this.data.mccType === item.id) {
      //         this.tradeIndex = index;
      //       }
      //     });
      //     this.initDistrictData(this.data.districtIds);
      //   },
      //   fail: () => {
      //     // this.data.userType = this.storeNatureList[0].id;
      //     // this.data.mccType = this.tradeList[0].id;
      //     this.initDistrictData();
      //   }
      // });
    },
    async getEasypayInfo () {
      this.bankArray = await getBankListSyncApi({});
      if (this.bankArray && this.bankArray.length > 0) {
        this.bankArray.unshift({
          id: null,
          name: '请选择开户银行'
        })
      }
      let data = await getFeeApiSync();
      if (data) {
        this.feeTypes = data;
        if (this.feeTypes && this.feeTypes.length > 0) {
          this.feeTypes.unshift({
            id: null,
            label: '请选择税率',
            name: ''
          });
        }
      }
      // this.tradeList = await getMccTypeSyncApi({});
      getEasyPayInfoApi({}, res => {
        if (res.status == 0 && res.data && res.data.id) {
          this.id = res.data.id;
          this.status = res.data.status;
          this.data.bankAccName = res.data.bankAccName; // 账户名称
          this.data.bankAcc = res.data.bankAcc; // 开户账号
          this.data.bank = res.data.bank; // 开户银行
          this.data.province = res.data.province; // 省份
          this.data.city = res.data.city; // 城市
          this.data.mobile = res.data.mobile; // 预留电话
          // 开户地区
          this.data.bankName = res.data.bankName; // 开户支行
          if (res.data.userType == 3) {
            this.data.licenseOpeningFileUrl = res.data.licenseOpeningFile.url;
            this.data.licenseOpeningFileId = res.data.licenseOpeningFile.id; // 开户许可证照片
          } else {
            this.data.bankCardFileUrl = res.data.bankCardFile.url;
            this.data.bankCardFileId = res.data.bankCardFile.id; //
          }
          
          this.data.feeTypeName = res.data.feeTypeName;
          if (this.feeTypes && this.feeTypes.length > 0) {
            this.feeTypes.forEach((item, index) => {
              if (res.data.feeTypeName == item.name) {
                this.feeIndex = index;
              }
            })
          }
          this.bankArray.forEach((item, index) => {
            if (item.id == this.data.bank) {
              this.bankIndex = index;
            }
          });
          this.initDistrictData([this.data.province, this.data.city]);
          this.selectBank = true;
          this.selectDistrict = true;
        } else if (res.status == 0 && !res.data) {
          this.init();
        }
      });
    },
  },
  mounted() {
    this.getEasypayInfo();
  },
  onShow () {
    // 
  },
  onLoad (option) {
    this.userType = option.userType;
  }
}
</script>

<style lang="scss" scoped>
  .pop-box-explain {
    .nounTitleBox {
      border-bottom: 1rpx solid #E1E1E1;
      margin: 0 15rpx;
      .nounTitle {
        font-size:30rpx;
        color:rgba(51,51,51,1);
        padding: 32rpx 0;
        text-align: center;
      }
    }
    .nounContent {
      padding: 26rpx 30rpx;
      .nounContent-tit {
        font-size: 26rpx;
        font-weight: 600;
      }
      .nounContent-txt {
        font-size: 22rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
    .pop-box-footer {
      display: flex;
      justify-content: space-between;
      .sub-btn {
        width: 260rpx;
        height: 60rpx;
        line-height: 60rpx;
        color: #F6DA99;
        font-size: 24rpx;
        background-color: #434343;
        border: none;
        &.yellow {
          width: 180rpx;
          background-color: #F6DA99;
          color: #434343;
        }
        &.sub2 {
          width: 100%;
        }
      }
    }
  }
  .apply_easypay_qrcode_step3 {
    position: relative;
    .scroll-wrap {
      height: calc(100vh - 52px - 101px);
    }
    .desc-info {
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      background-color: #FAFAFA;
      padding-left: 32rpx;
      line-height: 60rpx;
    }
    .form-wrap {
      // margin-top: 20rpx;
      background: #FFFFFF;
      .self-border-bottom {
        border-bottom: 1rpx solid #E1E1E1;
      }
      .self-margin-top {
        margin-top: 22rpx;
      }
      .cut-line {
        height: 22rpx;
        background-color: #FAFAFA;
      }
      
      .pick-value-select {
        color: #333333;
        font-size: 28rpx;
      }
      
      .pick-value {
        color: #999999;
        font-size: 24rpx;
      }
      .form-item {
        display: flex;
        width: 718rpx;
        // justify-content: center;
        align-items: center;
        margin-left: 32rpx;
        // height: 100rpx;
        padding: 36rpx 0;
        .rate-info {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
        .form-item-label {
          width: 200rpx;
          text-align: left;
          padding: 0 32rpx 0 0;
          font-size: 28rpx;
          color: #333333;
          font-weight:500;
        }
        .form-item-input {
          font-size: 28rpx;
          height: 38rpx;
          color: #333333;
          flex: 1;
          .input-placeholder {
            font-size: 24rpx;
            color: #999999;
          }
        }
        .form-item-pick {
          flex: 1;
        }
        .arrow {
          margin-right: 33rpx;
          border-right: 3rpx solid #8A8A8A;
          border-top: 3rpx solid #8A8A8A;
          height: 18rpx;
          width: 18rpx;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
          border-left: 2rpx solid transparent;
          border-bottom: 2rpx solid transparent;
        }
        .no-arrow {
          margin-left: 64rpx;
        } 
      }
      
      .form-other-item {
        padding: 0 34rpx 22rpx;
        .form-item-head {
          overflow: hidden;
          padding-top: 40rpx;
          .title {
            float: left;
            color: #333333;
            font-size: 36rpx;
          }
          .sample {
            float: right;
            text {
              color: #FF7473;
              font-size: 28rpx;
              text-decoration: underline;
            }
          }
          &:after {
            clear: both;
          }
        }
        .form-item-content {
          margin-top: 30rpx;
          .common-img-wrap {
            width: 330rpx;
            height: 200rpx;
            border: 1px dashed #E1E1E1;
            border-radius: 16rpx;
            
            .no-upload-img {
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .img {
                width: 80rpx;
                height: 80rpx;
              }
              .text {
                margin-top: 29rpx;
                color: #666666;
                font-size: 24rpx;
                font-weight:500;
              }
            }
            
            .upload-img-wrap {
              width: 100%;
              height: 100%;
              
              .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
            }
          }
          .upload-img-wrap {
            width: 100%;
            height: 100%;
            
            .upload-img {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
          }
        }
      }
    }
    
    .qrcode_selected_platform-footer {
      position: fixed;
      bottom: 0rpx;
      left: 0rpx;
      width: 100%;
      height: 125rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1rpx solid #E1E1E1;
      background: #FFFFFF;
      .qrcode_selected_platform-footer-btn {
        width: 687rpx;
        height: 90rpx;
        line-height: 90rpx;
        background-color: #434343;
        color: #F6DA99;
        font-size: 30rpx;
      }
    }
  }
</style>
